<template>
  <div class="app-container">
    <!-- 搜索相关区域 -->
    <div class="filter-container">
      <el-form :inline="true" :model="pageQuery" class="demo-form-inline">
        <el-form-item label="关键字搜索">
          <el-input v-model="pageQuery.content" size="mini" placeholder="关键字搜索" />
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="createT" value-format="yyyy-MM-dd" type="daterange" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="reset()">重置</el-button>
          <el-button type="primary" size="mini" icon="el-icon-search" @click="getPage()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button :loading="downloadLoading" size="small" icon="el-icon" @click="handleDownload_before()">导出</el-button>
    </div>

    <!-- 列表相关区域 -->
    <el-table v-loading="pageLoading" :data="pageVO.list" border fit highlight-current-row style="width: 100%;">
      <!-- 序号 -->
      <el-table-column label="序号" align="center">
        <template slot-scope="scope">
          <span v-text="getIndex(scope.$index)"></span>
        </template>
      </el-table-column>
      <!-- 反馈内容 -->
      <el-table-column label="反馈内容" align="center">
        <template slot-scope="{row}">
          <span>{{ row.content }}</span>
        </template>
      </el-table-column>
      <!-- 反馈时间 -->
      <el-table-column label="反馈时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.createTime }}</span>
        </template>
      </el-table-column>
      <!-- 反馈来源 -->
      <el-table-column label="反馈来源" align="center">
        <template slot-scope="{row}">
          <span>{{ row.source }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <pagination v-show="pageVO.total>0" :total="pageVO.total" :page.sync="pageQuery.pageNum"
      :limit.sync="pageQuery.pageSize" @pagination="getPage()" />
    <!-- 弹窗, 新增 / 修改 -->
  </div>
</template>

<script>
  import permission from '@/directive/permission/index.js'
  import * as api from '@/api/system/opinion'
  import Pagination from '@/components/Pagination'

  export default {
    name: '',
    directives: {
      permission
    },
    components: {
      Pagination
    },
    data() {
      return {
        downloadLoading: false,
        // 查询的参数
        pageQuery: {
          pageSize: 10,
          pageNum: 1,
          content: null,
          createTime: null,
          endTime: null
        },
        createT: [],
        // 返回参数
        pageVO: {
          list: [], // 返回的列表
          total: 0, // 一共多少条数据
          pages: 0 // 一共多少页
        },
        // 导出新数据
        NewpageVO:{
          list: [], // 返回的列表
          total: 0, // 一共多少条数据
          pages: 0 // 一共多少页
        },
        // 导出新数据
        NewpageSize:'',
        pageQuery1: {
          pageSize: '',
          pageNum: 1,
          content: null,
          createTime: null,
          endTime: null
        },
        searchParam1: {},
        // loading
        pageLoading: true,
        // 查询参数
        searchParam: {},
        addOrUpdateVisible: false,
        filename: '意见反馈单', //导出文件名
        bookType: 'xlsx', //导出类型
      }
    },
    mounted() {
      this.getPage()
    },
    methods: {
      //获取表格序号
      getIndex(index) {
        return (this.pageQuery.pageNum - 1) * this.pageQuery.pageSize + index + 1
      },

      // 导出
      handleDownload_before(){
        console.log('======')
        console.log(this.NewpageSize)
        this.pageQuery1.pageSize = this.NewpageSize
        this.pageQuery1.pageNum = 1
        this.pageQuery1.content = this.pageQuery.content
        this.pageQuery1.createTime = this.pageQuery.createTime
        this.pageQuery1.endTime = this.pageQuery.endTime
        console.log(this.pageQuery1.pageSize, this.pageQuery1.pageNum)
        api.page({
          ...this.pageQuery1,
          ...this.searchParam1
        }).then(pageVO1 => {
          this.NewpageVO = pageVO1
          console.log(this.NewpageVO)
          console.log('======')
          this.pageLoading = false
        })
        setTimeout(() => {
                this.handleDownload(); //调用export2Excel函数，填写表头和对应字段
              },100);
      },
      handleDownload() {
        import('@/utils/Export2Excel').then(excel => {
          this.downloadLoading = true
          const tHeader = [ '反馈内容', '反馈时间', '反馈来源']
          const filterVal = [ 'content', 'createTime', 'source']
          const list = this.NewpageVO.list
          console.log('----------------')
          console.log(this.NewpageVO.list)
          console.log(list)
          console.log('----------------')
          const data = this.formatJson(filterVal, list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: this.filename,
            autoWidth: true,
            bookType: this.bookType
          })
          this.downloadLoading = false
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          if (j === this.pageQuery.createTime) {
            return this.pageQuery.createTime(v[j])
          } else {
            return v[j]
          }
        }))
      },
      // 重置
      reset() {
        this.createT = [],
          this.pageQuery.content = ''
        this.getPage()
      },
      getPage() {
        console.log('进入加载页面数据')
        this.pageQuery.createTime = this.createT[0]
        this.pageQuery.endTime = this.createT[1]
        console.log(this.pageQuery.createTime)
        console.log(this.pageQuery.endTime)
        this.pageLoading = true
        api.page({
          ...this.pageQuery,
          ...this.searchParam
        }).then(pageVO => {
          this.pageVO = pageVO
          console.log(this.pageVO)
          this.NewpageSize=this.pageVO.total
          console.log(this.NewpageSize)
          this.pageLoading = false
        })
      },

      // 刷新回调用
      refreshChange() {
        console.log('刷新回调')
        this.page = this.$refs.crud.$refs.tablePage.defaultPage
        this.getPage(this.page)
      }
    }
  }
</script>
